<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
  </head>
  <body>
    <input type="text" /> <span></span>
    <br />
    <input type="password" /> <span></span>

    <button onclick="regClick()">注册</button>

    <script>
      /* 
            获取焦点  span提示 用户名的规则 
            失去焦点  判断 输入内容是否满足正则  
                        如果不满足正则 提示 只能 只能输入字母、数字、下划线
                        else 满足   发起请求
        */
      let ipts = document.querySelectorAll("input");
      let span = document.querySelector("span");
      let isUsername = false;
      let isPassword = false;
      ipts[0].onfocus = function () {
        //    获取焦点
        span.innerHTML = "6-18，数字 字母 下线 ，字母开头";
        span.style.color = "gray";
      };
      ipts[0].onblur = function () {
        //    失去焦点
        let reg = /^[a-z]\w{5,17}$/i;

        if (this.value.length < 6) {
          span.innerHTML = "长度不够6位";
          span.style.color = "red";
          isUsername = false;
        } else {
          if (reg.test(this.value)) {
            // else 满足   发起请求
            console.log("满足   发起请求");
            axios
              .get(checkusernameAPI, {
                params: { username: ipts[0].value },
              })
              .then((res) => {
                let obj = res.data;
                console.log(obj);
                span.innerHTML = obj.msg;
                if (obj.code == 1) {
                  span.style.color = "green";
                  isUsername = true;
                } else {
                  span.style.color = "red";
                  isUsername = false;
                }
              });
          } else {
            // 如果不满足正则 提示 只能 只能输入字母、数字、下划线
            span.innerHTML = "只能输入字母、数字、下划线";
            span.style.color = "red";
            isUsername = false;
          }
        }
      };

      ipts[1].onfocus = function () {
        this.nextElementSibling.innerHTML = "6-16个字符，区分大写";
      };
      ipts[1].onblur = function () {
        console.log(333);
        let reg = /^\S{6,16}$/;
        if (reg.test(this.value)) {
          this.nextElementSibling.innerHTML = "";
          isPassword = true;
        } else {
          this.nextElementSibling.innerHTML =
            "格式有误，必须是6-16个字符，区分大写";
          isPassword = false;
        }
      };

      // ipts[2]

      function regClick() {
        //判断 所有输入框的格式是否正确
        // 如果都正确 发起注册请求 注册 ，
        console.log(isPassword);
        console.log(22323);
        if (isPassword && isUsername) {
          // 发起注册请求 注册
          console.log(11);
          // https://jx.xuzhixiang.top/
          let username = ipts[0].value;
          let password = ipts[1].value;
          axios
            .get(regAPI, {
              params: { username: username, password },
            })
            .then((res) => {
              let { data } = res;
              console.log(data);
              alert(data.msg);
              if (data.code == 1) {
                location.href = "login.html";
                //注册成功了
                // localStorage
              }
            });
        } else {
        }
      }
    </script>
  </body>
</html>
